WebXR Hit Test Manager: Implementering af et Ray Casting System til Fordybende Oplevelser

Fremkomsten af Augmented Reality (AR) og Virtual Reality (VR) teknologier har åbnet spændende nye muligheder for at skabe fordybende og interaktive digitale oplevelser. WebXR, en JavaScript API til at få adgang til VR- og AR-funktioner i webbrowsere, gør det muligt for udviklere verden over at bygge disse oplevelser på en lang række enheder. En vigtig komponent i at skabe overbevisende WebXR-oplevelser er evnen til at interagere med det virtuelle miljø. Det er her WebXR Hit Test Manager og ray casting kommer i spil.

Hvad er Ray Casting, og hvorfor er det vigtigt?

Ray casting, i sammenhæng med WebXR, er en teknik, der bruges til at afgøre, om en virtuel stråle (en lige linje) skærer en virkelighedsflade, der detekteres af AR-systemet, eller et virtuelt objekt i VR-miljøet. Tænk på det som at skinne en laserpointer ind i dine omgivelser og se, hvor den rammer. WebXR Hit Test Manager leverer værktøjerne til at udføre disse ray casts og hente resultaterne. Denne information er afgørende for en række interaktioner, herunder:

• Objektplacering: Tillader brugere at placere virtuelle objekter på virkelige overflader, som at sætte en virtuel stol i deres stue (AR). Overvej en bruger i Tokyo, der virtuelt dekorerer deres lejlighed, før de forpligter sig til møbelkøb.
• Målretning og udvælgelse: Gør det muligt for brugere at vælge virtuelle objekter eller interagere med UI-elementer ved hjælp af en virtuel pegepind eller hånd (AR/VR). Forestil dig en kirurg i London, der bruger AR til at overlejre anatomisk information på en patient og vælge specifikke områder til gennemgang.
• Navigation: Flytter brugerens avatar gennem den virtuelle verden ved at pege på en placering og instruere dem om at flytte derhen (VR). Et museum i Paris kan bruge VR til at lade besøgende navigere gennem historiske udstillinger.
• Gestusgenkendelse: Kombinerer hit-testning med håndtracking for at fortolke brugerens bevægelser, som at knibe for at zoome eller stryge for at rulle (AR/VR). Dette kan bruges i et samarbejdsmøde i Sydney, hvor deltagerne manipulerer virtuelle modeller sammen.

Forstå WebXR Hit Test Manager

WebXR Hit Test Manager er en vigtig del af WebXR API'et, der letter ray casting. Det giver metoder til at oprette og administrere hit test kilder, som definerer strålens oprindelse og retning. Manageren bruger derefter disse kilder til at udføre hit tests mod den virkelige verden (i AR) eller den virtuelle verden (i VR) og returnerer information om eventuelle kryds. Nøglebegreber omfatter:

• XRFrame: XRFrame repræsenterer et snapshot i tid af XR-scenen, inklusive visningsholderens holdning og eventuelle registrerede planer eller funktioner. Hit tests udføres mod XRFrame.
• XRHitTestSource: Repræsenterer kilden til den stråle, der skal kastes. Det definerer oprindelsen (hvor strålen starter) og retningen (hvor strålen peger). Du vil typisk oprette en XRHitTestSource pr. inputmetode (f.eks. en controller, en hånd).
• XRHitTestResult: Indeholder information om et vellykket hit, inklusive holdningen (position og orientering) af krydsningspunktet og afstanden fra strålens oprindelse.
• XRHitTestTrackable: Repræsenterer en sporet funktion (som et plan) i den virkelige verden.

Implementering af et grundlæggende Hit Test System

Lad os gennemgå trinnene til at implementere et grundlæggende WebXR hit test system ved hjælp af JavaScript. Dette eksempel fokuserer på AR-objektplacering, men principperne kan tilpasses til andre interaktionsscenarier.

Trin 1: Anmodning om WebXR Session og Hit Test Support

Først skal du anmode om en WebXR-session og sikre dig, at funktionen 'hit-test' er aktiveret. Denne funktion er påkrævet for at bruge Hit Test Manager.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialiser din WebGL-renderer og scene her
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Forklaring:

• `navigator.xr.requestSession('immersive-ar', ...)`: Anmoder om en fordybende AR-session. Det første argument angiver sessionstypen ('immersive-ar' for AR, 'immersive-vr' for VR).
• `requiredFeatures: ['hit-test']`: Anmoder afgørende om funktionen 'hit-test', der aktiverer Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: Opretter en XRHitTestSource, der definerer strålens oprindelse og retning. I dette grundlæggende eksempel bruger vi 'viewer'-referencerummet, som svarer til brugerens synspunkt.

Trin 2: Oprettelse af Render Loop

Render loopen er hjertet i din WebXR-applikation. Det er her, du opdaterer scenen og gengiver hver ramme. I render loopen vil du udføre hit-testen og opdatere positionen af dit virtuelle objekt.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Opdater positionen og orienteringen af dit virtuelle objekt
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Gør objektet synligt, når der findes et hit
    } else {
      object3D.visible = false; // Skjul objektet, hvis der ikke findes et hit
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Forklaring:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Udfører hit-testen ved hjælp af den tidligere oprettede XRHitTestSource. Den returnerer et array af XRHitTestResult-objekter, der repræsenterer alle de fundne kryds.
• `hitTestResults[0]`: Vi tager det første hit-resultat. I mere komplekse scenarier vil du måske iterere gennem alle resultater og vælge det mest passende.
• `hit.getPose(xrReferenceSpace)`: Henter holdningen (position og orientering) af hittet i det angivne referencerum.
• `object3D.position.set(...)` og `object3D.quaternion.set(...)`: Opdater positionen og orienteringen af dit virtuelle objekt (object3D) for at matche hit-holdningen. Dette placerer objektet på skæringspunktet.
• `object3D.visible = true/false`: Styrer synligheden af det virtuelle objekt og får det til at fremstå kun, når der findes et hit.

Trin 3: Opsætning af din 3D-scene (Eksempel med Three.js)

Dette eksempel bruger Three.js, et populært JavaScript 3D-bibliotek, til at oprette en simpel scene med en kube. Du kan tilpasse dette til at bruge andre biblioteker som Babylon.js eller A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Aktiver WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10 cm kube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Skjul oprindeligt objektet
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* Ingen animationsløkke her. WebXR styrer det. */ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Flyt kameraet tilbage
}

// Kald initXR() for at starte WebXR-oplevelsen
initXR();

            

              
                Copy
              
            
          

Vigtigt: Sørg for at inkludere Three.js-biblioteket i din HTML-fil:

            


            

              
                Copy
              
            
          

Avancerede teknikker og optimeringer

Den grundlæggende implementering ovenfor giver et fundament for WebXR hit-testning. Her er nogle avancerede teknikker og optimeringer, du kan overveje, når du bygger mere komplekse oplevelser:

1. Filtrering af Hit Test-resultater

I nogle tilfælde vil du måske filtrere hit test-resultater for kun at overveje specifikke typer af overflader. For eksempel vil du måske kun tillade objektplacering på vandrette overflader (gulve eller borde). Du kan opnå dette ved at undersøge den normale vektor af hit-holdningen og sammenligne den med op-vektoren.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Kontroller, om overfladen er omtrent vandret
  const upVector = new THREE.Vector3(0, 1, 0); // Verdens op-vektor
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Roter normalen til verdensrummet

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Juster tærsklen (0.9) efter behov
    // Overfladen er omtrent vandret
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Brug af Forbigående Inputkilder

For mere avancerede inputmetoder som håndtracking vil du typisk bruge forbigående inputkilder. Forbigående inputkilder repræsenterer midlertidige inputhændelser, som et fingertryk eller en håndbevægelse. WebXR Input API giver dig adgang til disse hændelser og opretter hit testkilder baseret på brugerens håndposition.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Opret en hit testkilde fra target ray-holdningen
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Placer et objekt på hit-placeringen
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Ryd hit test-kilden op
    });
  }
});

            

              
                Copy
              
            
          

3. Optimering af ydeevne

WebXR-oplevelser kan være beregningsintensive, især på mobile enheder. Her er nogle tips til optimering af ydeevnen:

• Reducer hyppigheden af hit tests: Udførelse af hit tests hver ramme kan være dyrt. Overvej at reducere frekvensen, især hvis brugerens bevægelse er langsom. Du kan bruge en timer eller kun udføre hit tests, når brugeren initierer en handling.
• Brug et grænsevolumenhierarki (BVH): Hvis du har en kompleks scene med mange objekter, kan brug af en BVH fremskynde kollisionsdetektering betydeligt. Three.js og Babylon.js tilbyder BVH-implementeringer.
• LOD (Level of Detail): Brug forskellige detaljeringsniveauer for dine 3D-modeller afhængigt af deres afstand fra kameraet. Dette reducerer antallet af polygoner, der skal gengives for fjerne objekter.
• Occlusion Culling: Gengiv ikke objekter, der er skjult bag andre objekter. Dette kan forbedre ydeevnen betydeligt i komplekse scener.

4. Håndtering af forskellige referencerum

WebXR understøtter forskellige referencerum, der definerer det koordinatsystem, der bruges til at spore brugerens position og orientering. De mest almindelige referencerum er:

• Lokalt: Koordinatsystemets oprindelse er fast i forhold til brugerens startposition. Dette er velegnet til oplevelser, hvor brugeren forbliver i et lille område.
• Afgrænset gulv: Oprindelsen er på gulvniveau, og XZ-planet repræsenterer gulvet. Dette er velegnet til oplevelser, hvor brugeren kan bevæge sig rundt i et rum.
• Ubegrænset: Oprindelsen er ikke fast, og brugeren kan bevæge sig frit rundt. Dette er velegnet til AR-oplevelser i stor skala.

Valg af det passende referencerum er vigtigt for at sikre, at din WebXR-oplevelse fungerer korrekt i forskellige miljøer. Du kan anmode om et specifikt referencerum, når du opretter XR-sessionen.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Håndtering af enhedskompatibilitet

WebXR er en relativt ny teknologi, og ikke alle browsere og enheder understøtter den lige godt. Det er vigtigt at kontrollere WebXR-understøttelse, før du forsøger at initialisere en WebXR-session.

            
if (navigator.xr) {
  // WebXR understøttes
  initXR();
} else {
  // WebXR understøttes ikke
  console.error('WebXR understøttes ikke i denne browser.');
}

            

              
                Copy
              
            
          

Du bør også teste din WebXR-oplevelse på en række forskellige enheder for at sikre, at den fungerer korrekt.

Internationaliseringshensyn

Når du udvikler WebXR-applikationer til et globalt publikum, er det vigtigt at overveje internationalisering (i18n) og lokalisering (l10n).

• Tekst og UI-elementer: Brug et lokaliseringsbibliotek til at oversætte tekst og UI-elementer til forskellige sprog. Sørg for, at dit UI-layout kan rumme forskellige tekstlængder. For eksempel har tyske ord tendens til at være længere end engelske ord.
• Måleenheder: Brug passende måleenheder for forskellige regioner. For eksempel skal du bruge meter og kilometer i de fleste lande, men bruge fod og miles i USA og Storbritannien. Lad brugerne vælge deres foretrukne måleenheder.
• Dato- og tidsformater: Brug passende dato- og tidsformater for forskellige regioner. For eksempel skal du bruge YYYY-MM-DD-formatet i nogle lande og MM/DD/YYYY-formatet i andre.
• Valutaer: Vis valutaer i det passende format for forskellige regioner. Brug et bibliotek til at håndtere valutakonverteringer.
• Kulturel følsomhed: Vær opmærksom på kulturelle forskelle, og undgå at bruge billeder, symboler eller sprog, der kan være stødende for nogle kulturer. For eksempel kan visse håndbevægelser have forskellige betydninger i forskellige kulturer.

WebXR Udviklingsværktøjer og ressourcer

Flere værktøjer og ressourcer kan hjælpe dig med WebXR-udvikling:

• Three.js: Et populært JavaScript 3D-bibliotek til at skabe WebGL-baserede oplevelser.
• Babylon.js: En anden kraftfuld JavaScript 3D-motor med fokus på WebXR-support.
• A-Frame: En web-framework til at bygge VR-oplevelser ved hjælp af HTML.
• WebXR Emulator: En browserudvidelse, der giver dig mulighed for at teste WebXR-oplevelser uden at have en fysisk VR- eller AR-enhed.
• WebXR Device API Specification: Den officielle WebXR-specifikation fra W3C.
• Mozilla Mixed Reality Blog: En fantastisk ressource til at lære om WebXR og relaterede teknologier.

Konklusion

WebXR Hit Test Manager er et kraftfuldt værktøj til at skabe interaktive og fordybende AR/VR-oplevelser. Ved at forstå begreberne ray casting og Hit Test API'et kan du bygge overbevisende applikationer, der giver brugerne mulighed for at interagere med den virtuelle verden på en naturlig og intuitiv måde. Efterhånden som WebXR-teknologien fortsætter med at udvikle sig, er mulighederne for at skabe innovative og engagerende oplevelser uendelige. Husk at optimere din kode for ydeevne og overvej internationalisering, når du udvikler til et globalt publikum. Omfavn udfordringerne og belønningerne ved at bygge den næste generation af fordybende weboplevelser.